Lorsqu'une image est placée dans une div dotée d'une bordure, ou dans une cellule de tableau, ou dans tout autre conteneur de type bloc, on peut voir apparaitre un espace de quelques pixels sous l'image. Ce comportement est souvent surprenant lorsque l'on place une image seule dans un conteneur: on s'attend à ce que le conteneur s'adapte à la hauteur de l'image, sans espace supplémentaire.
Cependant, ce comportement est parfaitement logique. En simplifiant un peu, on peut dire qu'une image se comporte comme un caractère de texte, par exemple comme la lettre A majuscule. Les pieds du A majuscule ne se placent pas tout en bas du conteneur, mais sur ce que l'on appelle la ligne de base du texte. En dessous, il y a un espace réservé, qui sert à afficher le bas de certaines lettres («g», «p» ou «q» par exemple), et dont la hauteur exacte dépend de la taille du texte (font-size) et de la hauteur de ligne (line-height).
Comment éviter ce comportement?
Faire descendre l'image avec vertical-align
Par défaut, notre image est en vertical-align: baseline. On peut la faire descendre avec un vertical-align: bottom.
Notez aussi que dans de nombreux cas, et systématiquement lorsque l'image est le seul contenu d'un élément de type bloc en height: auto, un simple vertical-align: middle suffira largement.
Exemple:
#logo img {
vertical-align: middle;
}
Changer le comportement de l'image avec un display: block
Notre image n'est pas un élément de type en-ligne (il s'agit en réalité de ce que l'on appelle un élément remplacé), mais son comportement est proche d'un élément de type en-ligne. Et, comme pour un élément de type en-ligne, on peut obtenir un comportement de bloc avec display: block.
Exemple:
#logo img {
display: block;
}
Un peu d'histoire des navigateurs
Les anciens navigateurs (Internet Explorer 4 et 5, Netscape 4) ne laissaient pas d'espace sous les images lorsque l'image était, par exemple, le seul contenu d'une cellule de tableau. Cela facilitait grandement la construction de designs en tableaux. Imaginez le découpage d'une page très graphique en une série de tableaux et de multiples cellules contenant des images; si chaque image est suivie par un espace vide, la mise en page «éclate», et des trous apparaissent partout!
Lorsque les navigateurs ont évolué et ont commencé à avoir un meilleur support des standards, ils ont corrigé le comportement des images (en affichant donc les espaces réglementaires sous les images), mais cela «cassait» de très nombreux sites. C'est une des raisons qui ont poussé à l'invention du mécanisme de Doctype Switching.
Aujourd'hui, les principaux navigateurs ont au moins deux modes de rendu, un pour les sites préhistoriques et un pour les sites «récents». En mode Standard (mode pour les sites récents, on s'en doute), espaces sous les images; en mode Quirks ou mode de Compatibilité (pour la préhistoire), pas d'espaces sous les images. Il y a bien sûr de nombreuses autres différences entre les deux modes. Mais, pour la petite histoire, Mozilla Firefox a même un mode «presque Standard», ou la seule différence avec le mode Standard est l'absence des espaces sous les images esseulées.